<template>
  <div class="amapBox" id="amapBox">
    <el-amap
      ref="map"
      :center="center"
      :zoom="zoom"
      view-mode="2D"
      :showLabel="showMapLabel"
      :extra-options="{ vectorMapForeign: 'style_zh_cn' }"
      @init="initMap"
      @click="clickMap"
      class="amap-demo"
    >
      <el-amap-layer-satellite :visible="true"></el-amap-layer-satellite>
      <el-amap-info-window
        :position="position"
        :visible.sync="visible"
        :offset="infoWindowOffset"
        :autoMove="false"
        >
        <div class="infoWindowContainer">
          <div class="closeWrap" @click="closeWindow">
            <i class="el-icon-close"></i>
          </div>
          <div class="content">
            <div>
              <h2>{{ infoWindowContent[0] }}</h2>
              <p>{{ infoWindowContent[1] }}</p>
              <p style="color: #FFC344; margin: 10px 0">{{ infoWindowContent[2] }}</p>
              <p>{{ infoWindowContent[3] }}</p>
              <p>
                <span style="color: #5087EC">{{ infoWindowContent[4] }}</span>
                <span>{{ infoWindowContent[5] }}</span>
              </p>
            </div>
          </div>
          
        </div>
      </el-amap-info-window>
      <el-amap-info-window
        :position="position"
        :visible.sync="alarmWindowVisible"
        :offset="infoWindowOffset"
        :autoMove="false"
        >
        <div class="infoWindowContainer infoWindowContainer_alarm">
          <div class="closeWrap" @click="closeWindow">
            <i class="el-icon-close"></i>
          </div>
          <div class="content" style="padding-top: 45px">
            <div style="width: 80%">
              <div class="alarmItem" v-for="(item,index) in alarmWindowContent" :key="item">
                <img :src="require('@/assets/images/licang/jg1.png')" alt="" v-if="index === 0" />
                <img :src="require('@/assets/images/licang/jg2.png')" alt="" v-if="index === 1" />
                <img :src="require('@/assets/images/licang/hg3.png')" alt="" v-if="index === 2" />
                <span style="margin-left: 4px;flex:1">{{ item }}</span>
                <el-button type="warning" size="mini" @click="dispose(index)">去处置</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-amap-info-window>
      <el-amap-info-window
        :position="position"
        :visible.sync="trafficWindowVisible"
        :offset="[6,-20]"
        :autoMove="false"
        >
        <div class="infoWindowContainer infoWindowContainer_alarm">
          <div class="closeWrap" @click="closeWindow">
            <i class="el-icon-close"></i>
          </div>
          <div class="content" style="padding-top: 45px">
            <div style="width: 80%">
              <div class="alarmItem" v-for="(item,index) in trafficWindowContent" :key="item">
                <img :src="require('@/assets/images/licang/jg1.png')" alt="" v-if="index === 0" />
                <img :src="require('@/assets/images/licang/jg2.png')" alt="" v-if="index === 1" />
                <img :src="require('@/assets/images/licang/hg3.png')" alt="" v-if="index === 2" />
                <span style="margin-left: 4px;flex:1">{{ item }}</span>
                <el-button type="warning" size="mini" @click="dispose(index)">去处置</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-amap-info-window>
      <el-amap-layer-traffic :visible="showTraffic"></el-amap-layer-traffic>
      <!-- <template>
        <el-amap-text v-for="(item,index) in lv3Data" :key="item+index" :position="item" :text-style="textStyle" :visible="placeMarkerVisible" :text="`福岛小区${index+1}号楼`" :draggable="false" @click="clickText">
        </el-amap-text>
      </template> -->
    </el-amap>
    <!-- 处置弹窗 -->
    <Pop ref="Pop" :type="popInfo.type" :info="popInfo.info"></Pop>
  </div>
</template>

<script>
// import AMapLoader from '@amap/amap-jsapi-loader';
import { mapGetters } from 'vuex';
import levelData from './levelData'
export default {
  name: "AMap",
  computed: {
      ...mapGetters([
        'showTraffic',
        'showMapLabel',
        'placeMarkerVisible'
      ])
    },
  data: function () {
    return {
      popInfo: {},
      zoom: 13.76,
      center: [120.4242,36.186256],
      map: null,
      position: [120.4242,36.186256],
      visible: false,
      trafficWindowVisible: false,
      infoWindowOffset: [0, -70],
      infoWindowContent: [
        '必胜客（伟东·乐客城店）',
        '1674条评论 ￥68/人 披萨',
        '李沧区人气最高的披萨',
        '李沧区夏庄路7号负一层',
        '营业中',
        '【正常】 全年10:00-21:30'
      ],
      alarmWindowVisible: false,
      alarmWindowContent: [
        '李沧万达站人流拥堵',
        '李沧万达物业异常',
        '李沧站人流拥堵'
      ],
      trafficWindowContent: [
        '重庆中路发生交通事故',
        '重庆中路出口车流拥堵'
      ],
      lv3Data: levelData.lv3,
      textStyle: {  
        "background-color": "rgba(80, 106, 118, 0.8)",
        "text-align": "center",
        "font-size": "26px",
        color: "#fff",
        border: "2px solid rgba(86, 151, 252, 1)",
        "font-weight": "bold",
        padding: '20px 40px'
      }
      
    };
  },
  mounted() {
    // const map = new AMap.Map('amapBox', {
    //     zoom: this.zoom,
    //     center: this.center,
    //     layers: [
    //         // 卫星
    //         new AMap.TileLayer.Satellite(),
    //         // 路网
    //         // new AMap.TileLayer.RoadNet()
    //     ],
    //   });
    //   this.$store.commit('SET_MAP_STATUS', true)
    //   this.map = map
    //   this.$store.commit('SAVE_MAP_INSTANCE', map)
    //   this.$store.dispatch('focusMainDistrict')


    // AMapLoader.load({
    //   key: '48279e101f9c15387bd3945eed25e133',
    //   securityJsCode: '71f081de3c2ccd8f3bb22a176ec46afe',
    //   version: '2.0',
    //   plugins: ['AMap.DistrictSearch'],
    // }).then((AMap) => {
    //   // window.AMap = AMap
    //   const map = new AMap.Map('amapBox', {
    //     zoom: this.zoom,
    //     center: this.center,
    //     layers: [
    //         // 卫星
    //         new AMap.TileLayer.Satellite(),
    //         // 路网
    //         // new AMap.TileLayer.RoadNet()
    //     ],
    //   });
    //   this.$store.commit('SET_MAP_STATUS', true)
    //   this.map = map
    //   this.$store.commit('SAVE_MAP_INSTANCE', map)
    //   this.$store.dispatch('focusMainDistrict')
    // });

    window.addEventListener('openInfoWindow', e => {
      // console.log(e.detail)
      this.closeWindow()
      const { position, type, offset, content } = e.detail
      this.position = position
      this.infoWindowOffset = offset
      if (type === 'business') {
        this.visible = true
      } else if (type === 'traffic') {
        this.trafficWindowVisible = true
        if (content && content.length) {
          this.trafficWindowContent = content
        }
      } else {
        this.alarmWindowVisible = true
      }

    })
  },
  methods: {
    dispose(index) {
      if (index === 0) {
        this.popInfo={
          type: '交通疏导指令',
          info: '李沧区交警支队'
        }
      } else if (index === 1) {
        this.popInfo={
          type: '物业巡查指令',
          info: '李沧区市政环卫处'
        }
      } else if (index === 2) {
        this.popInfo={
          type: '交通疏导指令',
          info: '李沧区交警支队'
        }
      }
      
      this.$refs.Pop.open = true
    },
    getMap() {
      // console.log(this.$refs.map.$$getInstance());
    },
    clickMap(e) {
      console.log("click map :", e);
    },
    initMap(map) {
      console.log("init map: ", map);
      this.$store.commit('SET_MAP_STATUS', true)
      this.map = map
      this.$store.commit('SAVE_MAP_INSTANCE', map)
      this.$store.dispatch('focusMainDistrict')
      if (this.$route.path != '/index/traffic') {
        this.$store.dispatch('addConstantMarks', { type: 'all' })
      }
      // this.$store.dispatch('addStreetZone', 'licun')
      // this.$store.dispatch('focusStreetByName', 'cangkou')
      this.map.on('click', (e) => {
        console.log('点击的坐标:', [e.lnglat.lng, e.lnglat.lat])
      })
    },
    closeWindow() {
      this.map.clearInfoWindow();
    },
    clickText(e) {
      console.log(e, '!!!')
    }
  }
};
</script>

<style scoped lang="scss">
.amapBox {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss">
.amap-marker-label {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: none;
  -webkit-box-shadow: 1px 2px 4px #cccccc;
  -moz-box-shadow: 1px 2px 4px #cccccc;
  box-shadow: 1px 2px 4px #cccccc;
}
.infoWindowContainer {
  width: 393.6px;
  height: 283.2px;
  background: url('../../assets/images/licang/dw/tk.png') no-repeat center/100%;
  position: relative;
  color: #fff;
  padding-top: 15px;
  .content {
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    padding-left: 0px;
    display: flex;
    justify-content: center;
    h2 {
      margin-top: 20px;
    }
  }
  .alarmItem {
    width: 100%;
    margin: 5px auto;
    display: flex;
    align-items: center;
    border: 1px solid #00D2FF;
    background-color: rgba(39,58,104, 0.8);
    border-radius: 4px;
    padding: 3px 6px;
    .el-button--warning {
      background-color: #EC963B !important;
      color: #fff;
      padding: 4px;
    }
  }
  .closeWrap {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    .el-icon-close {
      font-size: 24px;
      cursor: pointer;
    }
    z-index: 999;
  }
}
.infoWindowContainer_alarm {
  background: url('../../assets/images/licang/dw/tk2.png') no-repeat center/100%;
}
.amap-info-content {
  background-color: transparent;
}
.amap-info-close {
  display: none;
  right: 1.5rem;
  top: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
}
</style>
